<template>
    <div>
        <!--    搜索表单-->
        <div style="margin-bottom: 20px;margin-top:-10px">
            <span style="float:left;margin-top:24px;font-size: large">患者信息:</span>
            <el-tag style="float:left;margin-top:12px;  width: 80px;" type="success;">挂号id:{{ RegisterForm.id }}</el-tag>
            <el-tag style="float:left;margin-top:12px;  width: 80px;" type="success;">姓名:{{ RegisterForm.realName
            }}</el-tag>
            <el-tag style="float:left;margin-top:12px;width: 110px;" type="success;">病历号:{{ RegisterForm.caseNumber
            }}</el-tag>
            <el-tag style="float:left;margin-top:12px;">年龄{{ RegisterForm.age }}</el-tag>
            <el-tag style="float:left;margin-top:12px;">性别{{ RegisterForm.gender }}</el-tag>
            <br><br>
        </div>
        <div style="margin-bottom: 20px">
            <el-divider></el-divider>
            <div style="float: left;margin-top: -10px">
                <i style="font-size: x-large" class="el-icon-document-checked"></i><span
                    style="margin-left:10px;font-weight:bold;font-size:x-large">开设处方</span>
            </div>
            <br>
        </div>
        <el-divider></el-divider>
        <br>
        <div>
            <el-table :data="PrescriptionTable" style="width: 100%">
                <el-table-column prop="drugName" label="药品名称" width="200">
                </el-table-column>
                <el-table-column prop="drugFormat" label="药品规格" width="100">
                </el-table-column>
                <el-table-column prop="drugPrice" label="单价" width="120">
                </el-table-column>
                <el-table-column label="用法用量">
                    <template slot-scope="scope">
                        <el-form>
                            <el-form-item>
                                <el-input type="textarea" autosize placeholder="请输入药品用法用量"
                                    v-model="scope.row.drugUsage"></el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="数量" width="200">
                    <template slot-scope="scope">
                        <el-form>
                            <el-form-item>
                                <el-input-number size="mini" v-model="scope.row.drugNumber"></el-input-number>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 处方开设成功时该行移除，同时数据库update -->
                        <el-button v-if="!scope.row.hidden" type="primary" size="medium" :plain="true" @click="update(scope.row)"
                            @click.native.prevent="removeRow(scope.$index, PrescriptionTable)">开设处方</el-button>
                        <el-button type="primary" size="medium" @click="deleteRow(scope.row)"
                            @click.native.prevent="removeRow(scope.$index, PrescriptionTable)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <el-popover placement="right" width="989" trigger="click">
                <div>
                    <span
                        style="float:left;font-size: larger;font-weight: bold">添加药品</span>
                    <el-input v-model="inputDrugName" style="width: 270px;float: left;margin-left:50px" placeholder="请输入药品名称"
                        clearable></el-input>
                    <el-input v-model="inputMnemonicCode" style="width: 270px;float: left;margin-left:40px" placeholder="请输入药品拼音助记码"
                        clearable></el-input>
                    <el-button style="float:left;margin-top:0px;width:100px;margin-left:60px;" icon="el-icon-search"
                        type="primary" @click="selectByCondition">搜索</el-button>

                    <!-- <span
                        style="float:left;margin-left:50px;margin-top:23px;font-size: larger;font-weight: bold">添加药品</span> -->
                </div>
                <br> <br>
                <el-table :data="DrugTable" style="width: 100%" height="250">
                    <el-table-column label="ID" prop="id" fixed>
                    </el-table-column>
                    <el-table-column label="药品名称" prop="drugName">
                    </el-table-column>
                    <el-table-column label="药品规格" prop="drugFormat">
                    </el-table-column>
                    <el-table-column label="单价" prop="drugPrice">
                    </el-table-column>
                    <el-table-column label="包装单位" prop="drugUnit">
                    </el-table-column>
                    <el-table-column label="生产厂家" prop="manufacturer">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!-- 让确认的这一行显示到外层表格中 -->
                            <el-button type="primary" @click="handleRowClick(scope.row)">确认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 增加就不要全部加载疾病信息了，内容特多，加载特慢 -->
                <el-button slot="reference">增加</el-button>
            </el-popover>
        </div>
        <br>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    mounted() {
        //获取session中的id
        this.RegisterForm.id = sessionStorage.getItem('registerId')///挂号id
        //初始化患者信息
        this.init()
    },
    data() {
        return {
            RegisterForm: {//储存患者信息
                id: '',//挂号id
                realName: '',
                caseNumber: '',
                age: '',
                gender: ''
            },
            inputDrugName: '',
            inputMnemonicCode: '',
            PrescriptionTable: [],
            drugName: '',
            drugFormat: '',
            drugPrice: '',
            drugUsage: '',
            drugNumber: 0,
            DrugTable: [],
            prescriptionId: '',//插入的处方id
            // 创建一个新的对象，并设置id的值
            newData: {
                id: '',//处方id
                drugName: '',
                drugFormat: '',
                drugPrice: '',
                hidden:false//默认不隐藏
            },
            selectedPrescriptionId: ''//选中的处方id,供update使用（供开设处方使用）
        }

    },
    methods: {
        //拿到挂号id后去搜索对应患者信息，展示在前端上
        async init() {
            //初始化患者信息
            await axios.get("http://127.0.0.1:8088/register/selectById", { params: { id: this.RegisterForm.id } }).then((res) => {
                console.log(res.data.data)
                //绑定数据
                this.RegisterForm.realName = res.data.data.realName
                this.RegisterForm.caseNumber = res.data.data.caseNumber
                this.RegisterForm.age = res.data.data.age
                this.RegisterForm.gender = res.data.data.gender
                this.$message({
                    message: '患者信息初始化成功',
                    type: 'success'
                });
            });
        },

        //移除行
        removeRow(index, rows) {
            rows.splice(index, 1)
        },
        //删除处方记录:delete
        async deleteRow(row) {
            //数据库中删除
            await axios.get("http://127.0.0.1:8088/prescription/deleteById", { params: { id: row.id } }).then((res) => {
                console.log("要删除的处方id为： " + row.id)
                console.log(res.data.data)
            });
        },

        //根据名字搜索药品:selectByCondition
        //参数：String drugName, String mnemonicCode
        async selectByCondition() {
            await axios.get("http://127.0.0.1:8088/druginfo/selectByCondition", { params: { drugName: this.inputDrugName, mnemonicCode: this.inputMnemonicCode } }).then((res) => {
                console.log(res.data.data)
                //绑定数据
                this.DrugTable = res.data.data
            });
        },

        //开设处方项:insert
        //参数：int registerId, int drugId
        async handleRowClick(row) {
            await axios.get("http://127.0.0.1:8088/prescription/insert", { params: { registerId: this.RegisterForm.id, drugId: row.id } }).then((res) => {
                console.log("drugId为：  " + row.id)
                console.log(res.data.data)
                //得到处方id
                this.prescriptionId = res.data.data

                //设置新的对象值
                this.newData.id = this.prescriptionId//每一行的处方id
                this.newData.drugName = row.drugName
                this.newData.drugFormat = row.drugFormat
                this.newData.drugPrice = row.drugPrice

                //将新对象插入确定的处方数组中
                this.PrescriptionTable.push(this.newData)
            });
        },

        //拿到选中行的处方id,供更新数据使用
        async update(row) {
            //让开设处方按钮不显示
            row.hidden=true
            this.selectedPrescriptionId = row.id
            console.log("选中的处方id为：  " + this.selectedPrescriptionId)
            console.log("row.drugNumber为： " + row.drugNumber)
            console.log("row.drugUsage为： " + row.drugUsage)
            //更新使用
            //参数：String drugUsage ,String drugNumber,int id
            await axios.get("http://127.0.0.1:8088/prescription/update", { params: { drugUsage: row.drugUsage, drugNumber: row.drugNumber, id: row.id } }).then((res) => {
                console.log(res.data.data)
                this.$message.success("处方开设成功")
            });

        }
    }
}
</script>
<style scoped></style>